<template>
    <div class="news-container">
        <div class="news-content" ref="box_ref">
            <div draggable="true" class="item" @dragstart="dragstartHandle" @dragend="dragendHandle"
                @dragover="dragoverHandle" @dragenter="dragenterHandle">1</div>
            <div draggable="true" class="item" @dragstart="dragstartHandle" @dragend="dragendHandle"
                @dragover="dragoverHandle" @dragenter="dragenterHandle">2</div>
            <div draggable="true" class="item" @dragstart="dragstartHandle" @dragend="dragendHandle"
                @dragover="dragoverHandle" @dragenter="dragenterHandle">3</div>
            <div draggable="true" class="item" @dragstart="dragstartHandle" @dragend="dragendHandle"
                @dragover="dragoverHandle" @dragenter="dragenterHandle">4</div>
            <div draggable="true" class="item" @dragstart="dragstartHandle" @dragend="dragendHandle"
                @dragover="dragoverHandle" @dragenter="dragenterHandle">5</div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const box_ref = ref(null)
let sourceNode = null

// 鼠标按下开始拖拽
const dragstartHandle = (e) => {
    console.log(1)
    // e.target.classList.add('dragging')
    sourceNode = e.target
}

// 鼠标松开结束拖拽
const dragendHandle = (e) => {
    console.log(2)
    // e.target.classList.remove('dragging')
}
// 拖拽经过
const dragoverHandle = (e) => {
    console.log(3)
    e.preventDefault()
}
// 拖拽进入
const dragenterHandle = (e) => {
    console.log(4)
    e.preventDefault()
    if (e.target === box_ref.value || e.target === sourceNode) return
    //通过索引判断是向上拖还是向下拖
    const children = Array.from(box_ref.value.children)
    const sourceIndex = children.indexOf(sourceNode)
    const targetIndex = children.indexOf(e.target)
    //插入操作
    if (sourceIndex < targetIndex) {
        box_ref.value.insertBefore(sourceNode, e.target.nextSibling)
    } else {
        box_ref.value.insertBefore(sourceNode, e.target)
    }
}
</script>
<style scoped lang="scss">
.news-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    >.news-content {
        height: 500px;
        width: 500px;
        box-shadow: 0 0 10px rgba(102, 102, 102, .5);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;

        >.item {
            height: 50px;
            text-align: center;
            line-height: 50px;

            &:nth-of-type(1) {
                background-color: rgba(102, 102, 102, .5);
            }

            &:nth-of-type(2) {
                background-color: rgba(102, 102, 102, .3);
            }

            &:nth-of-type(3) {
                background-color: rgba(102, 102, 102, .6);
            }

            &:nth-of-type(4) {
                background-color: rgba(150, 128, 128, 0.5);
            }

            &:nth-of-type(5) {
                background-color: rgba(105, 58, 58, 0.5);
            }
        }

        >.dragging {
            background: transparent;
            color: transparent;
            border: 1px dashed #ccc;
        }
    }
}
</style>